<template>
	<view class="edit-home">
		<form @submit="formSubmit" @reset="formReset">
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">姓名</view>
					<view class="tui-input">{{pageData.name}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">性别</view>
					<view class="tui-input">其他</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">电话号码</view>
					<view class="tui-input">{{pageData.phone}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">国籍（区域）</view>
					<view class="tui-input">其他</view>
				</view>
			</tui-list-cell>
			<view class="line-back"></view>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">证件类型</view>
					<view class="tui-input">--</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">证件号码</view>
					<view class="tui-input">{{pageData.idCard}}</view>
				</view>
			</tui-list-cell>
			<view class="line-back"></view>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">职业</view>
					<view class="tui-input">{{pageData.type}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell" style="display: flex;flex-flow: column;align-items: flex-start;">
					<view class="tui-title" style="margin-bottom: 20upx;">家庭地址</view>
					<textarea placeholder-class="phcolor" class="tui-input" name="homeDress" placeholder="请输入家庭地址" maxlength="50" type="text" />
				</view>
			</tui-list-cell>
		</form>
	</view>
</template>

<script>
	const form = require("@/components/utils/formValidation.js")
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiButton from "@/components/button/button"
	import utils from "@/utils/util.js"
	export default {
		components: {
			tuiListCell,
			tuiButton
		},
		data() {
			return {
				pageData:{},
			}
		},
		onLoad(option){
			this.pageData = option;
		},
		mounted() {
			
		   uni.showNavigationBarLoading()	
		   setTimeout(() => {
			    uni.hideNavigationBarLoading()
		   },1000)
		},
		onNavigationBarButtonTap(data) {
			uni.navigateTo({
				url:'./editInfo?' + utils.param(this.pageData) 
			})
		}
	}
</script>

<style>
	.edit-home{
		height: calc(100vh);
		overflow-y: auto;
		padding-bottom: 10upx;
		padding-top: 30upx;
		box-sizing: border-box;
		position: relative;
		background-color: rgb(247, 249, 251);
	}
	.edit-home .tui-title{
		width: 200upx;
	}
	.edit-home .tui-footer{
		position: fixed;
		left: 0;
		right: 0;
		padding: 30upx 40upx;
		background-color: #FFFFFF;
	}
	.edit-home .container {
		padding: 20rpx 0 50rpx 0;
	}
	
	.edit-home .tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.edit-home .tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}
	.edit-home .line-back{
		margin-top: 30upx;
	}
	.edit-home .tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}
	
	.edit-home .radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}
	
	.edit-home .tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}
	
	
	.edit-home .tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	
	.edit-home .btn-gray {
		margin-top: 30rpx;
	}
	
	.edit-home .tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>
